<template>
  <view>
    <status-bar></status-bar>
    <view class="flex flex-col gap-10">
      <back-page name="arrow-left"></back-page>
      <text class="text-2xl font-bold">登录</text>
      <login-components
        v-model="mobile"
        :validatePhoneMsg="validatePhoneMsg"
        @handle-input="handleInput"
        @validate-mobile="validateMobile"
      >
        <template #button>
          <van-button size="small" type="primary"> 密码登录</van-button>
        </template>
      </login-components>
    </view>
    <view class="fixed bottom-0 right-0 left-0">
      <agree-ment v-model="checked"></agree-ment>
      <btn-click :disabled="!(checked && mobile !== '')" @handleClick="getCode">
        获取验证码
      </btn-click>
    </view>
  </view>
</template>

<script setup lang="ts">
import StatusBar from '@/layout/PageItemComponents/statusBar.vue'
import { ref } from 'vue'
import BtnClick from '@/layout/components/BtnClick.vue'
import AgreeMent from '@/layout/components/AgreeMent.vue'
import { phoneReg } from '@/common/utils/validateMobile'
import LoginComponents from '@/layout/components/LoginComponents.vue'
import BackPage from '@/layout/components/BackPage.vue'

const { validateMobile, validatePhoneMsg, handleInput, mobile } = phoneReg()

const checked = ref<boolean>(false)
// 跳转到获取验证码页面
const getCode = () => {
  uni.navigateTo({
    url: `/pages/user-getcode/user-getcode?mobile=${mobile.value}`
  })
}
</script>

<style scoped lang="scss"></style>
